<template>
  <div class="login-container">
    <div class="logo-container">
      <img src="@/assets/logo.webp" alt="Logo" class="logo">
      <el-button @click="goToHome" type="primary" style="margin-left: 1700px;">返回首页</el-button>
    </div>
    <div class="login-header">
      <div class="header-right">
        <h1>欢迎来到我们的招聘平台</h1>
        <p>我们致力于为求职者和雇主提供最优质的招聘服务。</p>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="login-section">
        <div class="login-tabs">
          <button :class="{ active: activeTab === 'username' }" @click="activeTab = 'username'">用户名登录</button>
          <button :class="{ active: activeTab === 'phone' }" @click="activeTab = 'phone'">手机号登录</button>
          <button type="button" @click="redirectToRegister">注册</button>
        </div>
        <div class="login-form" v-if="activeTab === 'username'">
          <form @submit.prevent="handleUsernameLogin">
            <div class="form-group">
              <label for="username">用户名:</label>
              <input placeholder="请输入用户名" type="text" id="username" v-model="user.username" required />
            </div>
            <div class="form-group">
              <label for="password">密码:</label>
              <input placeholder="请输入密码" type="password" id="password" v-model="user.password" required />
            </div>
            <button type="submit">登录</button>
          </form>
        </div>
        <div class="login-form" v-if="activeTab === 'phone'">
          <form @submit.prevent="handlePhoneLogin">
            <div class="form-group">
              <label for="phone">手机号:</label>
              <input placeholder="请输入手机号" type="tel" id="phone" v-model="user.phone" required />
            </div>
            <div class="form-group">
              <label for="verificationCode">验证码:</label>
              <div class="input-with-button">
                <input placeholder="请输入验证码" type="text" id="verificationCode" v-model="user.verificationCode" required />
                <button type="button" @click="sendVerificationCode" :disabled="isSending">{{ buttonText }}</button>
              </div>
            </div>
            <button type="submit">登录</button>
          </form>
        </div>
      </div>
      <div class="recruitment-section">
        <div class="section hot-jobs">
          <h3>热门职位</h3>
          <ul>
            <li>软件工程师</li>
            <li>产品经理</li>
            <li>UI设计师</li>
            <li>数据分析师</li>
          </ul>
        </div>
        <div class="section user-reviews">
          <h3>用户评价</h3>
          <p>"非常满意的招聘平台，找到了理想的工作。" - 张三</p>
          <p>"招聘流程非常顺畅，推荐给所有求职者。" - 李四</p>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import Footer from '@/components/Footer.vue';
import qs from 'qs';
const activeTab = ref('username');
const user = ref({ username: '', password: '', phone: '', verificationCode: '' });
const router = useRouter();
const isSending = ref(false);
const countdown = ref(60);
const buttonText = ref('发送验证码');

const goToHome = () => {
  router.push('/');
};
const sendVerificationCode = () => {
  if (isSending.value) return;
  isSending.value = true;
  countdown.value = 60;
console.log('发送验证码请求发送'+user.value.phone);
    const data = qs.stringify({ phoneNumber: user.value.phone})
  axios.post(BASEURL + '/sendVerificationCode',data )
      .then(response => {
        console.log('验证码发送成功:', response.data);
        ElMessage.info('验证码已发送');
        startCountdown();
      })
      .catch(error => {
        console.error('验证码发送失败:', error);
        ElMessage.error('验证码发送失败，请重试');
        isSending.value = false;
      });
};

const startCountdown = () => {
  let timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
      buttonText.value = `${countdown.value}秒后重新发送`;
    } else {
      clearInterval(timer);
      isSending.value = false;
      buttonText.value = '发送验证码';
    }
  }, 1000);
};

const login = () => {
  console.log('用户信息', user.value);
  if (activeTab.value === 'phone') {
    console.log('输入的手机号:', user.value.phone);
    console.log('输入的验证码:', user.value.verificationCode);

    const data = qs.stringify({ phoneNumber: user.value.phone})
    // 验证验证码是否正确
    axios.post(BASEURL+'/verifyCode', data)
        .then(response => {
          if (response.data.code === 2000) {
            handleLogin();
          } else {
            ElMessage.error(response.data.msg);
            user.value.verificationCode = '';
          }
        })
        .catch(error => {
          console.error('验证码验证失败:', error);
          ElMessage.error('验证码验证失败，请重试');
        });
  } else {
    handleLogin();
  }
};

const handleLogin = () => {
  axios.post(BASEURL+'/common/login', user.value).then(response => {
    if (response.data.code === 2000) {
      const userData = response.data.data;
      console.log("后端数据" + JSON.stringify(response.data.data));
      localStorage.setItem("user", JSON.stringify(response.data.data));
      console.log('用户信息已存储到 localStorage:', localStorage.getItem("user")); // 检查 localStorage
      //检查账号状态
      console.log("用户角色为1");
    if (userData.userStatus === 0){
      ElMessage.error("账号被禁用，请联系管理员")
    }else {
      // 检查用户角色
      if (userData.role ===0){

        router.push("/admin/admin-home");
      }
      else if (userData.role === 2) {
        router.push("/job-seeker/recommended-positions");
      } else if (userData.role === 1) {
        console.log("用户角色为1");
        router.push({ name: 'EmployerHome' });
      } else {
        router.push("/"); // 其他情况跳转到首页
      }
    }
    }else {
      ElMessage.error(response.data.msg);
      // 登录失败清空输入框
      user.value.username = '';
      user.value.password = '';
    } });


};

const handleUsernameLogin = () => {
  login();
};

const handlePhoneLogin = () => {
  login();
};

const redirectToRegister = () => {
  router.push('/Register');
};


</script>
<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg,#2535f5 30%,#6af1ff 70%);
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.logo-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.logo-container .logo {
  width: 100px; /* 根据实际情况调整大小 */
  height: auto;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: white;

  margin-bottom: 100px; /* 调整顶部边距以避开 logo */
}

.header-right {
  margin-left: 0; /* 移除左边距 */
}

.login-header h1 {
  font-size: 28px;
  margin: 0;
}

.login-header p {
  font-size: 18px;
  margin: 10px 0 0;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.login-section {
  flex: 1;
  margin-right: 20px;
}

.login-tabs {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.login-tabs button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-tabs button.active {
  background-color: #0056b3;
  transform: scale(1.05);
}

.login-form {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  transition: box-shadow 0.3s ease;
}

.login-form:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.input-with-button {
  display: flex;
  align-items: center;
}

.input-with-button input {
  flex: 1;
  margin-right: 10px;
}

.input-with-button button {
  padding: 10px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.input-with-button button:hover {
  background-color: #0056b3;
}

button[type="submit"] {
  width: 100%;
  padding: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.recruitment-section {
  flex: 1;
  margin-left: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.recruitment-section:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.recruitment-section .section {
  margin-bottom: 20px;
}

.recruitment-section h3 {
  margin: 20px 0 10px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.recruitment-section p {
  margin: 10px 0;
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.hot-jobs ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.hot-jobs li {
  margin: 5px 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.user-reviews p {
  margin: 10px 0;
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.contact-info p {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .login-section, .recruitment-section {
    width: 100%;
    margin: 0 0 20px;
  }
}
.registration-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.popup-content h2 {
  margin-bottom: 20px;
}

.popup-content button {
  margin: 5px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.popup-content button:hover {
  background-color: #0056b3;
}
</style>
